<template>
  <div class="top-nav">
    <div class="middle-operation">
      <div
        v-for="item in userOperation"
        :class="{ active: nowTab == item.id }"
        :key="item.id"
        @click="tabOperation(item)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="right-btn" v-show="nowTab == 2">
      <div class="btn btn--add" @click="addOpen">
        <i class="iconfont ic-add"></i>
        {{ $t("btnName.add") }}
      </div>
      <div class="btn btn--del" @click="delData">
        <i class="iconfont ic-delete"></i>
        {{ $t("btnName.del") }}
      </div>
    </div>
  </div>
  <div class="bottom bottom--content">
    <div class="bottom__header">
      <div class="title">
        <span></span>
        <b>{{ nowTitle }}</b>
      </div>
      <div class="search">
        <el-input
          v-model="form.userName"
          :placeholder="$t('placeholder.navSearch')"
          :suffix-icon="Search"
          @keyup.enter="getList"
        />
      </div>
    </div>
    <div class="bottom__table">
      <cc-table
        :tableHeader="tableHeader"
        @selection-change="handleSelectionChange"
        :tableData="tableData"
        :selection="nowTab != 2"
      >
        <el-table-column v-if="nowTab == 1" align="center">
          <template #header>
            <span>{{ $t("status.name") }}</span>
          </template>
          <template #default="scope">
            <span
              :class="`status status-${scope.row.status}`"
              v-if="scope.row.status == 1"
              >{{ $t("status.pendingApproval") }}</span
            >
            <span :class="`status status-${scope.row.status}`" v-else>{{
              $t("status.rejected")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="nowTab == 1" align="center">
          <template #header>
            <span>{{ $t("operation.name") }}</span>
          </template>
          <template #default="scope">
            <span class="adopt" @click="updateUserData(scope.row.userId, 0)">{{
              $t("operation.adopt")
            }}</span>
            <span
              class="reject"
              v-if="scope.row.status == 1"
              @click="updateUserData(scope.row.userId, 3)"
              >{{ $t("operation.reject") }}</span
            >
          </template>
        </el-table-column>
        <el-table-column v-else align="center">
          <template #header>
            <span>{{ $t("operation.name") }}</span>
          </template>
          <template #default="scope">
            <span class="edit" @click="editOpen(scope.row)">{{
              $t("operation.edit")
            }}</span>
            <cc-confirm
              :title="$t('dilogTitle.del')"
              :cancel-text="$t('operation.cancel')"
              :submit-text="$t('operation.del')"
              :name="$t('operation.del')"
              @success="delData(scope.row.userId)"
            ></cc-confirm>
          </template>
        </el-table-column>
      </cc-table>
    </div>
  </div>
  <div class="footer">
    <cc-page
      :total="total"
      :page="form.pageNum"
      :limit="form.pageSize"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
  </div>
  <add-data ref="addData" @success="getList" />
  <edit-data ref="editData" @success="getList" />
</template>
<script>
import AddData from "./components/add-data/index.vue";
import EditData from "./components/edit-data/index.vue";
import pageEvent from "@/composables/pagenation";
import { dialogEvent } from "@/composables/dialog";
import { CcTable, CcPage, CcConfirm } from "@/components";
import { Search } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import {
  dataMiddleGroundBaseUserDelUsers,
  dataMiddleGroundBaseUserPage,
  dataMiddleGroundBaseUserUpdateUser,
} from "@/api/data-middleground-base/base/user";
export default {
  data() {
    return {
      userOperation: JSON.parse(
        decodeURIComponent(this.$t("router./user-management.userOperation")),
      ),
      headerObj: JSON.parse(
        decodeURIComponent(this.$t("tableHeader./user-management")),
      ),
      tableHeader: [],
      nowTab: 1,
      nowTitle: "",
      selectTableData: [],
    };
  },

  components: {
    CcTable,
    CcPage,
    CcConfirm,
    AddData,
    EditData,
  },
  watch: {
    nowTab: {
      handler(newValue) {
        this.tableHeader = this.headerObj[newValue];
      },
      immediate: true,
    },
  },
  setup() {
    const form = reactive({
      pageNum: 1,
      pageSize: 30,
      userName: "",
      status: 1,
    });
    const { handleCurrentChange, handleSizeChange, tableData, total, getList } =
      pageEvent(form, dataMiddleGroundBaseUserPage);
    const { dom: addData, open: addOpen } = dialogEvent("addData");
    const { dom: editData, open: editOpen } = dialogEvent("editData");
    return {
      handleCurrentChange,
      handleSizeChange,
      tableData,
      total,
      getList,
      form,
      Search,
      addData,
      addOpen,
      editData,
      editOpen,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //数据初始化
    init() {
      this.nowTitle = this.userOperation[0].title;
    },
    //切换用户操作
    tabOperation(item) {
      this.nowTab = item.id;
      this.nowTitle = item.title;
      this.form.status = item.status;
      this.tableHeader = this.headerObj[this.nowTab];
      this.getList();
    },
    //表格多选
    handleSelectionChange(data) {
      this.selectTableData = data;
    },
    //删除
    async delData(id) {
      let idList;
      if (id) {
        idList = [id];
      } else {
        idList = this.selectTableData.map((item) => {
          return item.userId;
        });
      }
      const res = await dataMiddleGroundBaseUserDelUsers({
        idList,
      });
      this.getList();
    },
    //用户处理  通过or拒绝
    async updateUserData(userId, status) {
      const res = await dataMiddleGroundBaseUserUpdateUser({
        userId,
        status,
      });
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.top-nav {
  width: 100%;
  height: 56px;
  padding: 0 24px;
  background: #fff;
  margin-bottom: 16px;
  position: relative;
  @include flex-x-y-center;
  .middle-operation {
    height: 100%;
    display: flex;
    div {
      height: 100%;
      line-height: 56px;
      text-align: center;
      position: relative;
      color: map-get($map: $font-sizes, $key: smText);
      font-size: 16px;
      cursor: pointer;
      margin-right: 40px;
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      color: map-get($map: $bg-primary, $key: static);
      &::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 2px;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: -12px;
        background: map-get($map: $bg-primary, $key: static);
      }
    }
  }
  .right-btn {
    height: 56px;
    position: absolute;
    right: 24px;
    top: 0;
    @include flex-x-y-center;
    .btn {
      width: 84px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #fff;
      border-radius: 2px;
      margin-left: 8px;
      cursor: pointer;
      i {
        margin-right: 10px;
      }
      &--add {
        background: map-get($map: $bg-primary, $key: static);
      }
      &--del {
        background: #f8344a;
      }
    }
  }
}
.bottom {
  background: #fff;
  height: calc(100% - 136px);
  padding: 0 24px;
  &__header {
    height: 64px;
    @include flex-x-between-y-center;
    .title {
      font-size: 16px;
      @include flex-y-center;
      span {
        width: 4px;
        height: 16px;
        background: map-get($map: $bg-primary, $key: static);
        margin-right: 8px;
      }
    }
    :deep(.search) {
      width: 300px;
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        --el-input-bg-color: #f2f3f5;
        border: none;
        // .el-input__inner {
        //   border-color: rgba(242, 243, 245, 1);
        // }
      }
    }
  }
  &__table {
    height: calc(100% - 64px);
  }
}
.footer {
  height: 64px;
  @include flex-x-y-center;
}
.adopt {
  color: map-get($map: $status-success, $key: static);
  margin-right: 16px;
  cursor: pointer;
}
.reject {
  color: #f8344a;
  cursor: pointer;
}
.cancel {
  color: #3491fa;
  cursor: pointer;
}
.edit {
  color: #1890ff;
  margin-right: 16px;
  cursor: pointer;
}
.del {
  color: #1890ff;
  cursor: pointer;
}
.status {
  position: relative;
  padding-left: 16px;
  &::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -4px;
  }
  &-1 {
    &::before {
      background: map-get($map: $bg-primary, $key: static);
    }
  }
  &-3 {
    color: map-get($map: $font-sizes, $key: smText);
    &::before {
      background: map-get($map: $fill-color, $key: weight);
    }
  }
}
</style>
